<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { getApprovalProcess } from '@/api/attendance'
import { defineProps, ref, watch } from 'vue'
import Store from '@/store'

import config from '@/config'

const baseUrl = config.baseUrl
const props = defineProps({
  ruleId: {
    type: String,
    required: true,
  },
  time: {
    type: Number,
    default: 0,
  },
  money: {
    type: Number,
    default: 0,
  },
  type: {
    type: Number,
    default: 0,
  },
  position: {
    type: Number,
    default: 0,
  },
  purpose: {
    type: Number,
    default: 0,
  },
  sealType: {
    type: Number,
    default: 0,
  },
  fileType: {
    type: Number,
    default: 0,
  },
  purchaseType: {
    type: Number,
    default: 0,
  },  departmentType: {
    type: Number,
    default: 0,
  },purchaseMoney: {
    type: Number,
    default: 0,
  },costDeptId: {
    type: Number,
    default: 0,
  },deptId: {
    type: Number,
    default: null,
  },
})
watch(
  () => props,
  (val) => {
    let type = null
    let position = null
    let purpose = null
    let sealType = null
    let fileType = null
    switch (val.type) {
      case '经营费用':
        type = 1
        break
      case '运营费用':
        type = 2
        break
      case '备用金':
        type = 3
        break
      case '信息化项目支出':
        type = 4
        break

    }
    switch (val.position) {
      case '是':
        position = 1
        break
      case '否':
        position = 0
        break
    }
    switch (val.purpose) {
      case '自用':
        purpose = 1
        break
      case '招待维系':
        purpose = 2
        break
    }
    switch (val.sealType) {
      case '公章':
        sealType = 1
        break
      case '合同章':
        sealType = 2
        break
      case '招投标专用章':
        sealType = 3
        break
    }
    switch (val.fileType) {
      case '报账类':
        fileType = 1
        break
      case '合同类':
        fileType = 2
        break
      case '招投标类':
        fileType = 3
        break
      case '工商税务类':
        fileType = 4
        break
      case '其他':
        fileType = 5
        break
    }
    const params = {
      ruleId: val.ruleId,
      time: val.time || null,
      money: val.money ||val.purchaseMoney|| null,
      purchaseType: val.purchaseType || null,
      departmentType: val.departmentType || null,
      type: type,
      position: position,
      purpose: purpose,
      sealType: sealType,
      fileType: fileType,
      costDeptId: String(props.costDeptId),
      deptId: String(props.deptId),
    }
    if(!params.costDeptId){
       delete  params.costDeptId
    }
    getApprovalProcess(params).then((res) => {
      approvalProcess.value = res.data
      Store._mutations.setApprovalProcess[0](JSON.stringify(res.data))
    })
  },
  {
    deep: true,
    immediate: true,
  },
)

const approvalProcess = ref([])

const current = ref(0)

onLoad(() => {})
</script>

<template>
  <view class="containerClass">
    <h2>审批流程</h2>
    <text>已由管理员预设不可修改审批人和删除抄送人</text>
    <uv-steps
      :current="current"
      active-color="#00B42A"
      direction="column"
      dot
      inactive-color="#86909C"
    >
      <uv-steps-item v-for="item in approvalProcess">
        <template v-slot:icon>
          <view
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #c9cdd4;
              width: 36rpx;
              height: 36rpx;
              border-radius: 50%;
            "
          >
            <image
              src="@/static/icon/auditDetailStep/step-2.svg"
              style="width: 20rpx; height: 20rpx"
            ></image>
          </view>
        </template>
        <template v-slot:title>
          <text class="titleClass">{{ item.name }}</text>
        </template>
        <template v-slot:desc>
          <view class="chaosong">
            <view v-for="person in item.data.filter((person) => person)" class="list-left">
              <image v-if="person.avatar" :src="baseUrl + person.avatar"></image>
              <image v-else src="@/static/images/defaultAvatar.png"></image>
              <!--  <text>{{ person.nickName + '' + person.phonenumber }}</text>-->
              <text>{{ person.nickName }}</text>
            </view>
          </view>
        </template>
      </uv-steps-item>
    </uv-steps>
  </view>
</template>
<style lang="scss" scoped>
@import '@/static/style/index.scss';

.containerClass {
  background-color: #ffffff;
  padding: 32rpx;
  //border-radius: 16rpx;
  margin-top: 20rpx;

  h2 {
    color: #1d2129;
    font-size: 32rpx;
    font-weight: 500;
  }

  text {
    color: #86909c;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 32rpx;
  }
}

.titleClass {
  align-self: stretch;
  color: #000000;
  font-size: 26rpx;
  font-style: normal;
  font-weight: 400;

  .huoqina {
    padding: 1rpx 8rpx;
    align-items: center;
    border-radius: 4rpx;
    border: 2rpx solid #165dff;
    width: 64rpx;
    height: 36rpx;
    color: #165dff;
    font-size: 24rpx;
  }
}

:deep(.uv-steps-item--column) {
  .uv-steps-item__wrapper--column--dot {
    background-color: #fff;
  }
}

:deep(.uv-steps-item__content) {
  margin-left: 24rpx !important;
}

.chaosong {
  display: flex;
  flex-wrap: wrap;

  .list-left {
    @include flex(center);
    padding: 8rpx 12rpx 8rpx 8rpx;
    background: #f2f3f5;
    border-radius: 200rpx;
    height: 64rpx;
    margin-right: 16rpx;
    margin-top: 8rpx;
    margin-bottom: 8rpx;

    image {
      width: 48rpx;
      height: 48rpx;
      border-radius: 12rpx;
    }

    text {
      display: inline-block;
      margin-left: 4rpx;
      margin-bottom: 0px !important;
    }
  }
}

.steps-list-box {
  .steps-list {
    @include flex(center, space-between);
    margin-bottom: 12rpx;

    .list-left {
      @include flex(center);
      padding: 8rpx 12rpx 8rpx 8rpx;
      background: #f2f3f5;
      border-radius: 8rpx;
      height: 64rpx;

      image {
        width: 48rpx;
        height: 48rpx;
        border-radius: 12rpx;
      }

      text {
        display: inline-block;
        margin-left: 4rpx;
        margin-bottom: 0px !important;
      }
    }

    .list-right {
      p {
        color: #00b42a;
        text-align: right;
        font-size: 24rpx;
        font-weight: 500;
      }

      text {
        color: #86909c;
        text-align: right;
        font-size: 20rpx;
        font-weight: 400;
      }
    }
  }
}
</style>
